<template>
    <div id="container">
        <div id="viewDiv"></div>
        <div style="position:absolute;right:20px;top:15px" id="home">
        </div>
        <div di="tool" style="position:absolute;top:15px;left:60px;">
            <el-button style="box-shadow:0 0 3px gray" @click="修改Home小部件目标位置">修改Home小部件目标位置</el-button>
        </div>
        <el-dialog v-model="if_dialog" :show-close="false" style="width:400px;white-space: pre-line;">
            <template #header>提示!</template>
            <div id="dialog_div" style="width:100%;height:100%;flex-direction:column" >
                <div style="width:100%;flex-direction:row;align-items: center;">
                    <span>{{ message_坐标 }}</span>
                </div>
                <div style="width:100%;flex-direction:row;align-items: center;">
                    请输入比例尺:<el-input ref="input_比例尺" v-model="比例尺"></el-input>
                    请输入动画时间:<el-input ref="input_动画时间" v-model="动画时间"></el-input>
                </div>
            </div>
            <template #footer>
                <el-button @click="取消" type="danger">取消</el-button><el-button @click="确定" type="primary">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
/*思路
    1:创建一个home对象并添加至视图指定的位置
    2:点击修改Home小部件目标位置按钮,在屏幕绘制一个点,该点的坐标将作为Home小部件的目标位置
    3:弹出dialog窗口,对Home小部件的动画时间和比例尺进行设置
    4:点击dialog窗口的确认按钮,对home小部件对象的goToOverride属性赋值
*/
import {onMounted,ref} from 'vue'
import * as 天地图 from '../天地图'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import Home from '@arcgis/core/widgets/Home'
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel'
var map,view,home,sketchViewModel,point
const input_比例尺=ref()
const input_动画时间=ref()
const message_坐标=ref('')
const 比例尺=ref("1500")
const 动画时间=ref("1500")
const if_dialog=ref(false)
var 取消=()=>{
    if_dialog.value=false
}
var 确定=()=>{//dialog窗口点击确定按钮的方法
    if(Number(比例尺.value)>1199 && Number(动画时间.value)){//判断输入的信息是否符合要求
        home.goToOverride=()=>{//如果符号要求,对home]对象的foToOverride属性赋值
            return view.goTo({
                target:point,
                scale:Number(比例尺.value)
            },{
                duration:Number(动画时间.value),
            })
        }
        if_dialog.value=false
    }//👇如果输入的比例尺和动画时间不符合要求,给出相应提示
    if(!Number(比例尺.value)){
        比例尺.value="比例尺必需为数字且数值大于1200"
    }
    if(!Number(动画时间.value)){
        动画时间.value="动画时间必需为数字"
    }
}
var 修改Home小部件目标位置=()=>{
    input_比例尺.value='';input_动画时间.value='';message_坐标.value='';比例尺.value='1500';动画时间.value='1500'
    view.graphics.removeAll()
    sketchViewModel.create("point",{mode:"click"})
}
onMounted(()=>{
    map=new Map({
        basemap:{
            baseLayers:天地图.天地图矢量
        }
    })
    view=new MapView({
        map:map,
        center:[120,36],
        zoom:12,
        container:"viewDiv",
        constraints:{
            maxScale:1300
        }
    })
    view.ui.remove(["zoom",'attribution'])
    home=new Home({//创建home小部件对象,跟view对象进行管理关联
        view:view,
    })
    view.ui.add(home,'top-left')//在视图指定位置添加home小部件
    sketchViewModel=new SketchViewModel({
        view:view,
        layer:view.graphics
    })
    sketchViewModel.pointSymbol.size=12
    sketchViewModel.on("create",(event)=>{//草图工具对象绘制完成后利用绘制完成的图形的几何的xy坐标,生成输出信息,然后打开dialog窗口
        if(event.state==="complete"){
            point=event.graphic.geometry
            message_坐标.value=`目标X坐标: ${point.x.toFixed(3)}E\n目标Y坐标: ${point.y.toFixed(3)}N`
            if_dialog.value=true
        }
    })
})
</script>

<style scoped>
#container,#viewDiv{
    height:100%;width:100%;padding:0;margin:0
}
</style>